<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>菜单管理</title>
        <script th:src="@{/layui1/layui.js}"></script>
        <link rel="stylesheet" th:href="@{/layui1/css/layui.css}">
    </head>
    <body>
        <div class="page-wrapper">
            <!--==========================添加菜单模态框===================================-->
            <form class="layui-form" action="" id="save_menu_form" style="display: none">
                <div class="layui-form-item">
                    <input type="hidden" name="parentId" id="parent_id">
                    <label class="layui-form-label">上级菜单</label>
                    <div class="layui-input-inline">
                        <input  type="text" name="parentName"     placeholder="单击选择上级菜单"
                                autocomplete="off"
                                class="layui-input parent_name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="menuType" lay-filter="menuType-filter" value="M" title="目录" >
                        <input type="radio" name="menuType" lay-filter="menuType-filter" value="C" title="菜单" checked="">
                        <input type="radio" name="menuType" lay-filter="menuType-filter" value="F" title="按钮" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="menuName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item menu_url" >
                    <label class="layui-form-label">请求地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="url"  placeholder="请输入请求地址" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item menu_perms" >
                    <label class="layui-form-label">权限标识</label>
                    <div class="layui-input-inline">
                        <input type="text" name="perms"  placeholder="请输入权限标识" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="orderNum" required lay-verify="required" placeholder="请输入显示排序" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-inline">
                        <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注信息" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formSaveMenu">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <!--==========================编辑菜单模态框===================================-->
            <form class="layui-form" action="" id="update_menu_form"  lay-filter="update_menu_form_filter" style="display: none">
                <div class="layui-form-item">
                    <input type="hidden" name="parentId" class="parent_id">
                    <input type="hidden" name="menuId">
                    <label class="layui-form-label">上级菜单</label>
                    <div class="layui-input-inline">
                        <input  type="text" name="parentName"    placeholder="单击选择上级菜单"
                                autocomplete="off"
                                class="layui-input parent_name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="menuType" lay-filter="menuType-filter" value="M" title="目录" >
                        <input type="radio" name="menuType" lay-filter="menuType-filter" value="C" title="菜单" checked="">
                        <input type="radio" name="menuType" lay-filter="menuType-filter" value="F" title="按钮" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="menuName" required lay-verify="required" placeholder="请输入菜单名称" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item menu_url" >
                    <label class="layui-form-label">请求地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="url"  placeholder="请输入请求地址" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item menu_perms">
                    <label class="layui-form-label">权限标识</label>
                    <div class="layui-input-inline">
                        <input type="text" name="perms"  placeholder="请输入权限标识" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="orderNum" required lay-verify="required" placeholder="请输入显示排序" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-inline">
                        <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注信息" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formUpdateMenu">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

            <!--表格树-->
            <div class="demo-side">
                <table id="menuTreeTb"></table>
            </div>

            <!--权限树弹出层-->
            <div class="layui-form-item" id="choose_parent_menu" style="display: none">
                <label class="layui-form-label">菜单权限</label>
                <div class="layui-input-inline">
                    <div id="menuTreeChoose" class="demo-tree-more"></div>
                </div>
            </div>

        </div>

        <!-- 表格操作列 -->
        <script type="text/html" id="tbBar">
            <a class="layui-btn  layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <!--顶部工具栏-->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="addMenu">添加菜单</button>
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>
            </div>
        </script>
        <script>
            layui.config({
                base: '/layui1/lay/modules/'      //自定义layui组件的目录
            }).extend({ //设定组件别名
                treeTable: 'treeTable',
            });
            layui.use(['layer', 'util', 'treeTable', 'jquery', 'form', 'tree'], function () {
                let $ = layui.jquery;
                let layer = layui.layer;
                let form = layui.form;
                let util = layui.util;
                let tree = layui.tree;
                let treeTable = layui.treeTable;
                let index;
                $('body').removeClass('layui-hide');

                // 渲染表格
                var insTb = treeTable.render({
                    elem: '#menuTreeTb',
                    url: '/menu/findAllMenusTreeTable',
                    toolbar: '#toolbarDemo',
                    height: '500',
                    tree: {
                        iconIndex: 2,
                        isPidData: true,
                        idName: 'menuId',
                        pidName: 'parentId'
                    },
                    defaultToolbar: ['filter', 'print', 'exports', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    cols: [
                        [
                            {type: 'numbers'},
                            {type: 'checkbox'},
                            {field: 'menuName', title: '菜单名称', minWidth: 140},
                            {field: 'orderNum', title: '排序', minWidth: 30},
                            {field: 'url', title: '请求地址', minWidth: 80},
                            {
                                field: 'menuType', title: '类型', minWidth: 50,
                                templet: function (d) {
                                    if (d.menuType == 'M') {
                                        return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">目录</button>'
                                    } else if (d.menuType == 'C') {
                                        return '<button type="button" class="layui-btn  layui-btn-xs">菜单</button>'
                                    } else {
                                        return '<button type="button" class="layui-btn  layui-btn-warm layui-btn-xs">按钮</button>'
                                    }
                                }
                            },
                            {field: 'perms', title: '权限标识'},
                            {field: 'remark', title: '备注'},
                            {field: 'createTime', title: '创建时间'},
                            {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
                        ]
                    ],
                    style: 'margin-top:0;'
                });

                // 工具列点击事件
                treeTable.on('tool(menuTreeTb)', function (obj) {
                    var event = obj.event;
                    if (event === 'del') {
                        /*layer.msg('删除成功');
                        obj.del();*/
                        let menuId=obj.data.menuId;

                        if(obj.data.hasOwnProperty('children') && obj.data.children.length>0){
                            layer.alert("含有子菜单，禁止删除!");
                        }else
                        {
                            //对于删除或者是其他敏感操作，一定要让用户确认。
                            layer.confirm('确定要删除吗？', function () {
                                $.ajax({
                                    url: '/menu/deleteMenu',
                                    dataType: 'json',
                                    type: 'POST',
                                    data: {menuId:menuId},//将js对象转成json串传入到后台
                                    success: function (result) {
                                        layer.closeAll();//关闭对话框
                                        layer.msg(result.msg);
                                        insTb.reload();
                                    }
                                })
                            })
                        }
                    } else if (event === 'edit') {
                        /*layer.msg('修改成功');
                        obj.update({authorityName: '新的名称'});*/

                        $.ajax({
                            url: '/menu/findAllMenus',
                            dataType: 'json',
                            contentType: "application/json;charset=UTF-8",
                            type: 'GET',
                            success: function (result) {
                                //基本演示
                                tree.render({
                                    elem: '#menuTreeChoose'
                                    , data: result
                                    , onlyIconControl:true
                                    ,click: function(treeObj){
                                        /*alert(obj.data.id);*/ //得到当前点击的节点数据的id
                                        /*alert(obj.data.title);*/ //得到当前点击的节点数据的名字
                                        $(".parent_id").val(treeObj.data.id);
                                        $(".parent_name").val(treeObj.data.title);
                                        layer.close(index);
                                    }
                                });
                            }
                        });

                        layer.open({
                            title: '编辑菜单',
                            type: 1,
                            content: $('#update_menu_form'),
                            area: ['450px', '430px']
                        });

                        //获取父节点的名称
                        $.ajax({
                            url: '/menu/findParentNameId',
                            dataType: 'json',
                            type: 'POST',
                            data: {menuId:obj.data.parentId},
                            success: function (result) {
                                //将修改前的数据赋值给修改表单
                                form.val('update_menu_form_filter', {
                                    "parentName":result.data.menuName
                                    ,"parentId": obj.data.parentId
                                    ,"menuId": obj.data.menuId
                                    ,"menuName": obj.data.menuName
                                    ,"url": obj.data.url
                                    ,"perms": obj.data.perms
                                    ,"orderNum": obj.data.orderNum
                                    ,"menuType":obj.data.menuType
                                    ,"remark": obj.data.remark
                                });
                            }
                        })

                    }
                });

                // 头部工具栏点击事件
                treeTable.on('toolbar(menuTreeTb)', function (obj) {
                    if (obj.event === 'addMenu') {
                        $.ajax({
                            url: '/menu/findAllMenus',
                            dataType: 'json',
                            contentType: "application/json;charset=UTF-8",
                            type: 'GET',
                            success: function (result) {
                                //基本演示
                                tree.render({
                                    elem: '#menuTreeChoose'
                                    , data: result
                                    , onlyIconControl: true
                                    , click: function (obj) {
                                        /*alert(obj.data.id);*/ //得到当前点击的节点数据的id
                                        /*alert(obj.data.title);*/ //得到当前点击的节点数据的名字
                                        $("#parent_id").val(obj.data.id);
                                        $(".parent_name").val(obj.data.title);
                                        layer.close(index);
                                    }
                                });
                            }
                        });
                        layer.open({
                            title: '添加菜单',
                            type: 1,
                            content: $('#save_menu_form'),
                            area: ['400px', '480px']
                        });
                    }
                });
                form.on('radio(menuType-filter)', function (data) {
                    /*      console.log(data.elem); //得到radio原始DOM对象
                          console.log(data.value); //被点击的radio的value值*/
                    let menuType = data.value;
                    switch (menuType) {
                        case 'M':
                            $("#menu_url").css('display', 'none');
                            $("#menu_perms").css('display', 'none');
                            break;
                        case 'C':
                            $("#menu_url").css('display', 'block');
                            $("#menu_perms").css('display', 'block');
                            break;
                        case 'F':
                            $("#menu_url").css('display', 'none');
                            break;
                    }
                });

                //添加提交
                form.on('submit(formSaveMenu)', function (data) {

                    $.ajax({
                        url: '/menu/saveMenu',
                        dataType: 'json',
                        type: 'POST',
                        data: data.field,
                        success: function (result) {
                            layer.closeAll();//关闭对话框
                            layer.msg(result.msg);
                            insTb.reload();
                        }
                    })
                    return false;
                });
                //修改提交
                form.on('submit(formUpdateMenu)',function (data) {
                    $.ajax({
                        url: '/menu/updateMenu',
                        dataType: 'json',
                        type: 'POST',
                        data: data.field,
                        success: function (result) {
                            layer.closeAll();//关闭对话框
                            layer.msg(result.msg);
                            insTb.reload();
                        }
                    })
                    return false;
                });

                // 全部展开
                $('#btnExpandAll').click(function () {
                    insTb.expandAll();
                });

                // 全部折叠
                $('#btnFoldAll').click(function () {
                    insTb.foldAll();
                });
                // 重载
                $('#btnReload').click(function () {
                    insTb.reload();
                });
                $('#btnRefresh').click(function () {
                    insTb.refresh();
                });

                //点击上级菜单弹出菜单树
                $(".parent_name").click(function () {
                    index = layer.open({
                        title: '选择上级菜单',
                        type: 1,
                        content: $('#choose_parent_menu'),
                        area: ['400px', '350px']
                    });
                })

            });
        </script>
    </body>
</html>